<template>
  <div class="event-detail-container">
    <!-- 顶部活动信息区域 -->
    <div class="event-header">
      <div class="event-basic-info">
        <h1 class="event-title">{{ eventDetail?.title }}</h1>
        <div class="event-date-range">
          <el-icon>
            <Calendar/>
          </el-icon>
          {{ dateFormat(eventDetail?.startTime, 'yyyy年MM月dd日') }} -
          {{ dateFormat(eventDetail?.endTime, 'yyyy年MM月dd日') }}
        </div>
        <div class="event-meta-info">
          <div class="meta-item">
            <div class="meta-label">开始时间</div>
            <div class="meta-value">{{ dateFormat(eventDetail?.startTime, 'yyyy年MM月dd日') }}</div>
          </div>
          <el-divider direction="vertical"/>
          <div class="meta-item">
            <div class="meta-label">活动地点</div>
            <div class="meta-value">{{ eventDetail?.location || '待定' }}</div>
          </div>
          <el-divider direction="vertical"/>
          <div class="meta-item">
            <div class="meta-label">报名方式</div>
            <div class="meta-value">线上报名</div>
          </div>
        </div>
        <el-button
            type="primary"
            size="large"
            class="join-button"
            @click="joinEvent"
        >
          <el-icon>
            <Plus/>
          </el-icon>
          立即报名
        </el-button>
      </div>
      <!-- 参与者展示 -->
      <div class="participants-section">
        <h3 class="section-title">已报名成员</h3>
        <div class="participants-list">
          <div
              v-for="item in eventJoinerPage.list"
              class="participant-card"
          >
            <el-avatar :src="item.avatar" :size="80"/>
            <div class="participant-name">{{ item.nickname }}</div>
            <div class="join-time">
              参与时间：{{ dateFormat(item?.joinTime, 'yyyy年MM月dd日') }}
            </div>
          </div>
        </div>
        <div>
          <el-empty
              v-if="!eventJoinerPage.list.length === 0"
              description="暂无报名人员"
              :image-size="100"
          />
        </div>
      </div>
    </div>
    <!-- 活动详情内容区域 -->
    <div class="event-content">
      <div>
        <h5>活动内容</h5>
      </div>
      <div class="content-container" v-html="eventDetail?.content"></div>
      <!-- 活动风采 -->
      <el-card shadow="hover" class="content-section">
        <div class="section-header">
          <el-icon>
            <Picture/>
          </el-icon>
          <span>活动风采</span>
        </div>
        <div class="gallery-container">
          <div class="gallery">
            <el-image
                v-for="item in eventDetail?.mienList"
                :src="item.url"
                fit="cover"
                class="gallery-image"
                :preview-src-list="eventDetail.mienList.map(i => i.url)"
                :initial-index="eventDetail.mienList.indexOf(item)"
                hide-on-click-modal
            />
          </div>
        </div>
        <div>
          <el-empty
              v-if="eventDetail?.mienList?.length === 0"
              description="暂无活动风采"
              :image-size="100"
          />
        </div>
      </el-card>
      <!-- 活动评论 -->
      <el-card shadow="hover" class="content-section">
        <div class="flex-between">
          <div class="section-header">
            <el-icon>
              <ChatLineRound/>
            </el-icon>
            <span>活动评论</span>
          </div>
          <div>
            <el-button icon="Plus" v-if="eventDetail?.isJoin" @click="showRemarkForm(0)">
              发表评论
            </el-button>
          </div>
        </div>
        <div class="comments-container">
          <div
              v-for="item in eventRemarkPage.list"
              :key="item.id"
          >
            <el-space>
              <el-avatar :src="item.avatar" :size="48"/>
              <div>{{ item.nickname }}</div>
            </el-space>
            <div>

              <div>{{ item.content }}</div>
              <div class="comment-time">
                {{ $formatTimeAgo(item.createTime) }}
              </div>
            </div>
            <div class="flex-end">
              <el-space>
                <el-text v-if="!item.showRely" size="small" @click="getReplyList(item)">展开查看回复
                  <el-icon>
                    <ArrowUp/>
                  </el-icon>
                </el-text>
                <el-text v-else size="small" @click="item.showRely=false">收起回复
                  <el-icon>
                    <ArrowDown/>
                  </el-icon>
                </el-text>
                <el-button text type="primary" icon="ChatDotRound" size="small"
                           @click="reply(item)">回复
                </el-button>
              </el-space>
            </div>
            <div v-if="item.showRely" class="reply">
              <div v-for="reply in item.replies">
                <el-space>
                  <el-avatar :src="reply.avatar"></el-avatar>
                  <el-text>{{ reply?.nickname }}</el-text>
                </el-space>
                <div>
                  回复：{{ reply?.content }}
                </div>
              </div>
            </div>
          </div>
          <el-empty
              v-if="eventRemarkPage.list.length === 0"
              description="暂无评论"
              :image-size="100"
          />

        </div>
      </el-card>
      <el-card v-if="canRemark">
        <template #header>
          {{replyTitle}}
        </template>
        <el-form :model="eventRemarkForm" ref="remarkFormRef" :rules="rules">
          <el-form-item prop="content">
            <el-input
                type="textarea"
                placeholder="请输入评论内容"
                :rows="5"
                v-model="eventRemarkForm.content"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="addEventRemark(remarkFormRef)">发表评论</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, watch, onMounted, computed} from 'vue'
import {useRoute} from "vue-router";
import {
  reqAddEventParticipant,
  reqCreateEventRemark,
  reqGetEventInfo,
  reqGetEventRemarkPage,
  reqGetJoinerPage
} from "@/api/social/event";
import type {SocEventRemark, EventDetailVO} from "@/api/social/event/type";
import {useUserStore} from "@/stores/user";
import {dateFormat} from '@/utils'
import router from "@/router";
import {
  Calendar,
  Plus,
  Picture,
  ChatLineRound
} from '@element-plus/icons-vue'
import type {FormInstance} from "element-plus";

const route = useRoute()
let canRemark = ref(false)
let replyTitle = ref('发表评论')
const userStore = useUserStore()
let eventJoinerPage = reactive({
  list: [],
  total: 0,
})
let remarkFormRef = ref()
let eventRemarkForm = reactive({
  eventId: route.query.eventId,
  content: '',
  parentId: 0
})
// 数据相关
const eventDetail = ref<EventDetailVO>({})
const eventRemarkPage = reactive({
  list: [] as SocEventRemark[],
  total: 0,
  pageNum: 1,
})
let replyQuery = reactive({
  parentId: 0,
  eventId: route.query.eventId,
  pageNum: 1,
  pageSize: 10
})
const loading = ref(true)
const remarkLoading = ref(true)
const remarkQuery = reactive({
  eventId: route.query.eventId,
  pageNum: 1,
  pageSize: 10
})
let showRemarkForm = (parentId: number = 0) => {
  eventRemarkForm.parentId = parentId
  if (!userStore.isLogin) {
    userStore.showLoginDialog()
    return
  }
  canRemark.value = true
}
let reply=(item)=>{
  replyTitle.value = '回复：' + item.nickname
  showRemarkForm(item.remarkId)
}
let getReplyList = async (item) => {
  item.showRely = true
  replyQuery.parentId = item.remarkId
  let res = await reqGetEventRemarkPage(replyQuery)
  item.replies = res.data.list
}
// 获取数据方法
const getEventDetail = () => {
  reqGetEventInfo(route.query.eventId as string).then(res => {
    eventDetail.value = res.data
    loading.value = false
  })
}

const getEventRemarkPage = () => {
  reqGetEventRemarkPage(remarkQuery).then(res => {
    Object.assign(eventRemarkPage, res.data)
    remarkLoading.value = false
  })
}
let getEventJoinerPage = async () => {
  let res = await reqGetJoinerPage({eventId: route.query.eventId, pageNum: 1, pageSize: 100})
  Object.assign(eventJoinerPage, res.data)
}
const joinEvent = () => {
  if (!userStore.isLogin) {
    userStore.showLoginDialog()
    return
  }
  router.push({
    name: 'event-join',
    query: {
      eventId: route.query.eventId
    }
  })
}
let addEventRemark = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await reqCreateEventRemark(eventRemarkForm)
      eventRemarkForm.content = ''
      eventRemarkForm.parentId = 0
      getEventRemarkPage()
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 初始化
onMounted(() => {
  getEventDetail();
  getEventJoinerPage()
  getEventRemarkPage()
});
let rules = {
  content: [
    {required: true, message: '请输入评论内容', trigger: 'blur'}
  ]
}
</script>

<style scoped lang="scss">
.event-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.event-header {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;

  @media (max-width: 992px) {
    flex-direction: column;
  }
}

.event-basic-info {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.event-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.event-date-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  color: #666;
  margin-bottom: 25px;

  .el-icon {
    font-size: 18px;
  }
}

.event-meta-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
  margin: 20px 0;
  background: #f9f9f9;
  border-radius: 8px;

  .meta-item {
    text-align: center;
    padding: 0 15px;
  }

  .meta-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
  }

  .meta-value {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .el-divider {
    height: 40px;
    margin: 0;
  }
}

.join-button {
  width: 100%;
  margin-top: 20px;
  height: 48px;
  font-size: 16px;
}

.participants-section {
  width: 350px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  @media (max-width: 992px) {
    width: 100%;
  }
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.participants-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 20px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.participant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s;

  &:hover {
    background: #f5f5f5;
    transform: translateY(-3px);
  }

  .participant-name {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .join-time {
    font-size: 12px;
    color: #999;
    text-align: center;
  }
}

.event-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content-section {
  border-radius: 12px;
  border: none;

  :deep(.el-card__body) {
    padding: 0;
  }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;

  .el-icon {
    font-size: 20px;
    color: var(--el-color-primary);
  }
}

.gallery-container {
  padding: 20px;

  .gallery {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;

    .gallery-image {
      width: 200px;
      height: 150px;
      border-radius: 8px;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.03);
      }
    }
  }
}

.comments-container {
  padding: 20px;

  .comment-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }
  }

  .comment-content {
    flex: 1;
  }

  .comment-user {
    font-weight: 500;
    margin-bottom: 5px;
  }

  .comment-text {
    color: #333;
    line-height: 1.5;
    margin-bottom: 5px;
  }

  .comment-time {
    font-size: 12px;
    color: #999;
  }
}
.reply{
  padding-left: 20px;
  background-color: rgba(84, 92, 100, 0.44);
}
/* 滚动条样式 */
:deep(.el-scrollbar__bar) {
  opacity: 1 !important;
}

:deep(.el-scrollbar__thumb) {
  background-color: rgba(144, 147, 153, 0.3);

  &:hover {
    background-color: rgba(144, 147, 153, 0.5);
  }
}
</style>
<style>
.content-container img {
  max-width: 100%;
  height: auto;
  margin: 15px 0;
}
</style>
